<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>

    <div id="app">
        <!--1.使用组件-->
        <global_component></global_component>
    </div>

    <script>

        //1.定义子组件
        var part_component = {
            template:"<h1>大头儿子</h1>"
        }
        var part_component2 = {
            template:"<h1>围裙妈妈</h1>"
        }

        //2.定义全局组件
        Vue.component(
            'global_component',
            {
                template:"<div><h1>小头爸爸</h1><part_component></part_component><part_component2></part_component2></div>",
                components:{part_component, part_component2}
            }
        )
        //3.创建vue对象
        var vue = new Vue({
            el:"#app"
        })

    </script>
</body>
</html>